<template>
  <div>
    <div style="margin: 20px 20px;" class=".not-print">
      <el-row>
        <el-col :span="6" v-for="(btn,index) in buttonList"  :key="index">
          <el-button :plain="btn.active" :type="btn.type" @click="handleButtonClick(index)">{{btn.title}}
          </el-button>
        </el-col>
        <el-col :span="6" style="float:right;" v-if="showaudit">
          <el-button type="danger" @click="handleClickAudit">审核</el-button>
        </el-col>
      </el-row>
    </div>
    <div style="margin:0px 5px;border-bottom: 1px solid #cccccc;" class=".not-print"></div>
    <div id="capture">
        <component :is="currentView" :date="date" :propReportId="reportId"  :propName="agencyinfo.cName" :propLicense="agencyinfo.licence" @pickFatherFounction="pickFatherFounction"></component>
    </div>
    <div v-if="currentView !=='vAudit'">
      <div style="text-align: center;padding-top:20px;">
        <el-button :plain="true" type="info" style="border: 1px solid #1f76dc;color: #1f76dc;" @click="printReport">
          打印请点击此处
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import vPrintWljd from "../../components/PrintWljd.vue";
import vPrintZzcj from "../../components/PrintZzcj.vue";
import vPrintZzjd from "../../components/PrintZzjd.vue";
import vAudit from "../../components/Audit.vue";

export default {
  components: {
    vPrintWljd,
    vPrintZzcj,
    vPrintZzjd,
    vAudit
  },
  props: ["showaudit", "reportId"],
  computed: {
    ...mapGetters(["reportDetail", "reportViewLoading"]),
    date() {
      return this.reportDetail.createdAt
        ? this.reportDetail.createdAt.substring(0, 10)
        : "";
    },
    agencyinfo() {
      return this.reportDetail.agencyInfo ? this.reportDetail.agencyInfo : {};
    }
  },
  data() {
    return {
      currentView: "vPrintWljd",
      printIndex: 0,
      buttonList: [
        {
          title: "外联接待入境旅游",
          index: "vPrintWljd",
          type: "primary",
          active: false
        },
        {
          title: "组织接待国内旅游",
          index: "vPrintZzjd",
          type: "success",
          active: true
        },
        {
          title: "组织出境旅游",
          index: "vPrintZzcj",
          type: "warning",
          active: true
        }
      ]
    };
  },
  methods: {
    handleButtonClick(index) {
      this.printIndex = index;
      if (this.buttonList[index].active) {
        this.buttonList.map(btn => {
          btn.active = true;
        });
        this.buttonList[index].active = false;
        this.currentView = this.buttonList[index].index;
      }
    },
    handleClickAudit() {
      this.currentView = "vAudit";
      this.buttonList.map(btn => {
        btn.active = true;
      });
    },
    pickFatherFounction() {
      this.$emit("hideDialog");
    },
    printReport() {
      sessionStorage.setItem("printDate", this.date);
      sessionStorage.setItem("printtype", this.printIndex);
      sessionStorage.setItem("reportId", this.reportDetail.id);
      this.$router.push({
        name: "govprint"
      });
    }
  }
};
</script>
<style>
@media print {
  .not-print {
    opacity: 0;
  }
}
</style>
